<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button{
            font-size: 16px;
            border: 0;
            outline: none;
            background-color:white ;
        }
    </style>
</head>
<body>
    <div class="nav">
        <button>视频</button>
        <button>直播</button>
    </div>
    <div class="content">
        <!-- <p>1.中央部署进一步优化防疫20条措施</p>
        <p>2.70秒带你打卡互联网之光博览会</p>
        <p>3.草莓上市部分品种近200元一斤</p>
        <p>4.95后女生花1.96亿买下A股公司</p>
        <p>5.俄为何突然从“关键战场”撤军?</p>
        <p>6.本土感染激增 4省份连续3天超500例</p> -->
    </div>
</body>
</html>
<script>
    // 定义一个路由表
    var routes = [
        {path:'/video',component:video_page},
        {path:'/live',component:live_page}
    ]
    // 给多个标签绑定点击事件
    var btns = [...document.querySelectorAll('button')]//获取所有的button标签并把他们放入到数组中  解构并赋值
    btns.forEach((item,index)=>{//遍历每一个button标签
        item.onclick = function(e){//添加点击事件后执行函数内的语句
            e.preventDefault()//阻止默认行为
            // 点击button时让内容高亮
            btns.forEach((item)=>{
                item.style.color = ''
                item.style.borderTop = '' 
            })
                item.style.color = 'green'
                item.style.borderTop = '1px solid green' 
            // 调用history.pushState（）添加一个新的历史记录（同时实现路由地址的切换）
            history.pushState({},'',routes[index].path)
            // 获取 routes数组中的component属性对应的值并调用
            routes[index].component();
        }
    })

    // 渲染视频的内容
    var arr1 = ['1.中央部署进一步优化防疫20条措施','2.70秒带你打卡互联网之光博览会','3.草莓上市部分品种近200元一斤','4.95后女生花1.96亿买下A股公司','5.俄为何突然从“关键战场”撤军?','6.本土感染激增 4省份连续3天超500例']
    function video_page(){
        document.querySelector('.content').innerHTML = arr1.map((item)=>{
            return `  
            <p>${item}</p>`
            }).join('')
    }
    // 渲染直播的内容
    var arr2 = ['1.直播|双11全球快递"云监工"','2.慢直播|邂逅绝美云海日出','3.慢直播|天舟五号已到位，将于近日','4.慢直播|济南趵突泉———天下第一泉','5.直播|立冬拥抱暖阳','6.慢直播|邂逅绝美云海日出']
    function live_page(){
        document.querySelector('.content').innerHTML = arr2.map((item)=>{
            return `  
            <p>${item}</p>`
            }).join('')
        document.querySelector('.content p:nth-child(3)').style.color = 'red'
    }
</script>